<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="data"></div>
    <button id="send">发送</button>
    <button id="send2">发送（第二种方式）</button>
  <script>
      var sendBtn = $('#send');
      if(sendBtn){
          sendBtn.click(function(){
              $.ajax({
                  type: 'get',
                  url: 'http://127.0.0.1:3000/xhr-get?name=yes&age=16&gender=boy',//这个url直接粘贴进浏览器地址栏也能够看到返回的信息
                  success: function(data){
                      console.log(data);
                      var dataEl = document.getElementById('data');
                      if(dataEl){
                          dataEl.innerText = '姓名：'+ data[0].name + '，年龄：' + data[0].age + "，性别："+data[0].gender;
                          dataEl.innerHTML += '<br/>';
                          dataEl.innerText += '发送的名字：' + data[1].name + '，发送的年龄:' + parseInt(data[1].age) + '，发送的性别:'+data[1].gender;
                      }
                  },
                  error: function () {
                      console.log('error');
                  }
              });
          });
      }
      var sendBtn2 = $('#send2');
      if(sendBtn2){
          sendBtn2.click(function(){
              $.get("http://127.0.0.1:3000/xhr-get", { name: "towrabbit2", age: 23, gender:'boy' },
                  function(data){
                      console.log("Data Loaded: ");
                      console.log(data);
                      var dataEl = document.getElementById('data');
                      if(dataEl){
                          dataEl.innerText = '姓名：'+ data[0].name + '，年龄：' + data[0].age + "，性别："+data[0].gender;
                          dataEl.innerHTML += '<br/>';
                          dataEl.innerText += '发送的名字：' + data[1].name + '，发送的年龄:' + data[1].age + '，发送的性别:'+data[1].gender;
                      }
              });
          })
      }
  </script>
  </body>
</html>